<template>
	<el-link @click="toggleFullscreen" :underline="false" class="toggle-fullscreen">
		<text class="pr-1">{{ modelValue ? "退出" : "全屏" }}</text>
		<text :class="`iconfont ${props.modelValue ? 'iconbx-exit-fullscreen' : 'iconbx-exit-fullscreen'}`"></text>
	</el-link>
</template>

<script setup lang="ts">
const props = defineProps({
	modelValue: Boolean
});
const emit = defineEmits(["toggle"]);
const toggleFullscreen = () => {
	emit("toggle");
};
</script>

<style lang="scss" scoped>
.toggle-fullscreen {
	position: absolute;
	top: 10px;
	right: 15px;
	z-index: 9;
	padding: 5px 10px;
	margin-left: 0;
	color: var(--el-primary);
	.iconfont {
		font-size: 25px;
	}
}
</style>
